<template>
    <div class="usercenter">
        <ul class="list-item">
            <li :class="iseditconsignee ? 'flex-start' : ''">
                <div>
                    <p class="intro">收货人：</p>
                </div>
                <div style="width: 100%;">
                    <p @click="setEditconsignee" v-if="iseditconsignee === false" style="text-align: right;">{{address.consignee}}</p>
                    <input type="text" ref="consignee" v-model.trim="address.consignee"  @blur="iseditconsignee = false" v-if="iseditconsignee === true"/>
                </div>
            </li>
            <li :class="iseditMobile ? 'flex-start' : ''">
                <div>
                    <p class="intro">联系电话：</p>
                </div>
                <div style="width: 100%;">
                    <p @click="setEditphone" v-if="iseditMobile === false" style="text-align: right;">{{address.phoneNumber}}</p>
                    <input type="text" ref="phoneNumber" v-model.trim="address.phoneNumber" v-if="iseditMobile === true " @blur="iseditMobile = false" />
                </div>
            </li>
            <li @click="showArea = true">
                <div>
                    <p class="intro">所在地区：</p>
                </div>
                <p> {{selecteArea ? selecteArea : '>'}}</p>
            </li>
            <li>
                <div style="width: 100%;">
                    <div>
                        <p class="intro"  style="margin-bottom:10px;">详细地址：</p>
                    </div>
                    <div>
                        <textarea v-model.trim="address.detailAddress" placeholder="请输入街道门牌等信息"></textarea>
                    </div>
                </div>
            </li>
        </ul>
        <ul class="list-item">
            <li>
                <div>
                    <p class="intro" style="margin-bottom:10px;">设为默认</p>
                    <p class="font-12 light-grey">选择后为默认地址</p>
                </div>
                <el-switch v-model="address.isDefault" active-color="#38e91a">
                </el-switch>
            </li>
        </ul>
        <div class="single-bottom-btn yellow" @click="add">
            <p>保存</p>
        </div>
        <Area v-if="showArea" @hideArea="hideArea" :selectAddress="selectAddress"/>
    </div>
</template>

<script>
  import Area from './area'
  import {checkTel, getQuery } from '@/utils/utils'
  import {addAddress, getAddress} from '_common/services/address'
  import wxLogin from '_common/wxLogin.js'
  export default {
    name: 'addAddress',
    data() {
      return {
        showArea: false,
        selecteArea: null,
        iseditconsignee: false,
        iseditMobile: false,
        selectAddress: null,
        address: {
          consignee: '',
          phoneNumber: '',
          detailAddress: '',
          province: '',
          city: '',
          region: '',
          provinceCode: '',
          cityCode: '',
          regionCode: '',
          isDefault: false,
          addressId: ''
        }
      }
    },
    async beforeMount() {
        await wxLogin(this.getData)
    },
    created () {
    },
    computed: {},
    methods: {
      getData() {
        this.address.addressId = getQuery('addressId') || ''
        if (this.address.addressId) {
            this.getInfo()
        }
        else {
            this.iseditconsignee = true
            this.iseditMobile = true
        }
      },
      setEditconsignee () {
        this.iseditconsignee = true
        this.$nextTick(
          () => this.$refs.consignee.focus()
        )

      },
      setEditphone () {
        this.iseditMobile = true
        this.$nextTick(
          () => this.$refs.phoneNumber.focus()
        )
      },
      getInfo () {
        getAddress(this.address.addressId).then(res => {
          if (res && res.code === 0) {
            this.address = res.data
            this.selectAddress = {
              p: {areaName: this.address.province, areaCode: this.address.provinceCode},
              c: {areaName: this.address.city, areaCode: this.address.cityCode},
              d: {areaName: this.address.region, areaCode: this.address.regionCode}
            }
//            if(this.address.consignee) {
//              this.iseditconsignee = true
//            }
//            if(this.address.phoneNumber) {
//              this.iseditMobile = true
//            }
            this.selecteArea = this.address.province + this.address.city + this.address.region
          }
          else {
            this.$alertTip(res.msg)
          }
        }, reject => {
          this.$alertTip(res.msg)
        })
      },
      setdefault () {
        this.address.isDefault = !this.address.isDefault;
      },
      hideArea () {
        let params = arguments.length > 0 ? (arguments[0] ? arguments[0] : null) : null
        if (params) {
          this.address.province = params.p.areaName
          this.address.provinceCode = params.p.areaCode
          this.address.city = params.c.areaName
          this.address.cityCode = params.c.areaCode
          this.address.region = params.d.areaName
          this.address.regionCode = params.d.areaCode
          this.selecteArea = this.address.province + this.address.city + this.address.region
        }
        this.showArea = false
      },
      add () {
        for(let a in this.address){
          if (!a) {
            this.$alertTip('请填写完整信息！')
            break
          }
        }
        let a = checkTel(this.address.phoneNumber)
        if (!a.result) {
          this.$alertTip(a.msg)
          return false
        }
        addAddress(this.address).then(res => {
            if (res && res.code === 0) {
              // 跳转到列表页》
              this.$openRouter({
                name: 'address'
              })
            }
            else {
              this.$alertTip(res.msg)
            }
        }, reject => {

        })
      }
    },
    mounted(){
    },
    components: {
      Area
    }
  }
</script>
<style lang="less">
    @import "../../css/common";
    @import "../../css/commonlayout";

    body {
        background: #f8f8f8;
        .usercenter {
            background: #f8f8f8;
            .list-item {
                &:nth-child(2) {
                    margin-top: 20px;
                }
                li {
                    margin-bottom: 0px;
                }
            }
        }
        .single-bottom-btn {
            margin-top: 60px;
        }
        .intro {
            width: 150px;
            color: #868585;
        }

        .el-switch {
            .el-switch__core {
                height: 40px;
                border-radius: 40px;
                &:after {
                    width: 36px;
                    height: 36px;
                }
            }
            &.is-checked {
                .el-switch__core::after {
                    margin-left: -38px;
                }
            }
        }
    }

</style>